<template>
  <div class="security-settings">
    <h4 class="section-title">
      <el-icon><Lock /></el-icon>
      安全设置
    </h4>

    <div class="setting-item">
      <div class="setting-icon phone">
        <el-icon><Phone /></el-icon>
      </div>
      <div class="setting-content">
        <div class="setting-title">
          安全手机
          <el-tag type="success" size="small" effect="light">已绑定</el-tag>
        </div>
        <div class="setting-desc">手机号可用于登录、身份验证、密码找回、接收通知</div>
      </div>
      <div class="setting-action">
        <el-button type="primary" size="small" round>修改</el-button>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-icon email">
        <el-icon><Message /></el-icon>
      </div>
      <div class="setting-content">
        <div class="setting-title">
          安全邮箱
          <el-tag type="success" size="small" effect="light">已绑定</el-tag>
        </div>
        <div class="setting-desc">邮箱可用于登录、身份验证、密码找回、接收通知</div>
      </div>
      <div class="setting-action">
        <el-button type="primary" size="small" round>修改</el-button>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-icon password">
        <el-icon><Lock /></el-icon>
      </div>
      <div class="setting-content">
        <div class="setting-title">
          登录密码
          <el-tag type="success" size="small" effect="light">已设置</el-tag>
        </div>
        <div class="setting-desc">为了账户安全，建议定期更换密码</div>
      </div>
      <div class="setting-action">
        <el-button type="primary" size="small" round @click="showPasswordDialog = true">修改</el-button>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="showPasswordDialog" title="修改密码" width="500px" :before-close="handlePasswordDialogClose">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password" placeholder="请输入当前密码" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="handlePasswordSubmit" :loading="changingPassword">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Lock, Message, Phone } from "@element-plus/icons-vue";

const emit = defineEmits(['password-changed']);

const showPasswordDialog = ref(false);
const changingPassword = ref(false);
const passwordFormRef = ref(null);

const passwordForm = ref({
  currentPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const passwordRules = {
  currentPassword: [{ required: true, message: "请输入当前密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    {
      validator: (_, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const resetPasswordForm = () => {
  passwordForm.value = {
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  };
  passwordFormRef.value?.clearValidate();
};

const handlePasswordDialogClose = () => {
  resetPasswordForm();
  showPasswordDialog.value = false;
};

const handlePasswordSubmit = async () => {
  if (!passwordFormRef.value) return;
  await passwordFormRef.value.validate(async valid => {
    if (valid) {
      changingPassword.value = true;
      try {
        ElMessage.success("密码修改成功");
        emit('password-changed');
        showPasswordDialog.value = false;
        resetPasswordForm();
      } catch (error) {
        ElMessage.error("网络错误，请稍后重试");
      } finally {
        changingPassword.value = false;
      }
    }
  });
};
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;

.security-settings {
  .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: $color-text-primary;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .el-icon {
      font-size: 1.1rem;
      color: $color-primary;
    }
  }

  .setting-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      background: $bg-color-hover;
      transform: translateX(2px);
    }

    .setting-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;

      .el-icon {
        font-size: 1.1rem;
      }

      &.phone,
      &.email,
      &.password {
        background: $color-primary-light-9;
        color: $color-primary;
      }
    }

    .setting-content {
      flex: 1;

      .setting-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: $color-text-primary;
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .el-tag {
          font-size: 0.7rem;
          padding: 0.2rem 0.4rem;
          border-radius: 8px;
          font-weight: 500;
        }
      }

      .setting-desc {
        font-size: 0.8rem;
        color: $color-text-secondary;
        line-height: 1.4;
        margin: 0;
      }
    }

    .setting-action {
      flex-shrink: 0;

      .el-button {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        font-weight: 500;
        transition: all 0.2s ease;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}
</style>
